"use client";
import { claimActivityReward, getJackpotInfo, GetJackpotResponse } from "@/api/activity";
import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
import { useRouter } from "@/i18n/routing";
import { formatAmount } from "@/utils";
import { Toast } from "antd-mobile";
import BigNumber from "bignumber.js";
import clsx from "clsx";
import dayjs from "dayjs";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import React from "react";
import styles from "./style.module.scss";

// const tabCftg = React.useMemo(() => {
//     return [
//         {
//             image: "/jackpot/2.png",
//             text: "Dia 2",
//             key: 2,
//         },
//         {
//             image: "/jackpot/3.png",
//             text: "Dia 3",
//             key: 3,
//         },
//         {
//             image: "/jackpot/7.png",
//             text: "Dia 7",
//             key: 7,
//         },
//         {
//             image: "/jackpot/15.png",
//             text: "Dia 15",
//             key: 15,
//         },
//         {
//             image: "/jackpot/30.png",
//             text: "Dia 30",
//             key: 30,
//         },
//     ];
// }, []);

const Jackpot: React.FC = () => {
    const router = useRouter();
    const searchParams = useSearchParams();
    const t = useTranslations();
    const [actKey, setActKey] = React.useState<number | string>(2);
    const [infoData, setInfoData] = React.useState<GetJackpotResponse>();
    const activeId = searchParams.get("activity_id");
    const [amount, setAmount] = React.useState<any>({});
    const [visible, setVisible] = React.useState<boolean>(false);

    const images = React.useMemo(() => {
        return [
            "/jackpot/2.png",
            "/jackpot/3.png",
            "/jackpot/7.png",
            "/jackpot/15.png",
            "/jackpot/30.png",
        ];
    }, []);
    const curTabData: any = React.useMemo(() => {
        return infoData?.list[`${actKey}`] || {};
    }, [actKey, infoData]);

    const list = React.useMemo(() => {
        const base = [
            {
                left: "Ãmbito do depósito",
                right: "Bónus Misterioso",
            },
        ];
        if (curTabData?.arr) {
            curTabData?.arr.sort((a: any, b: any) => {
                return a.id - b.id;
            });
            for (let i = 0; i < curTabData.arr.length; i++) {
                const item = curTabData.arr[i];
                base.push({
                    left: `R$ ${formatAmount(item.min)}-${formatAmount(item.max)}`,
                    right: `R$ ${formatAmount(item.show_min)}-${formatAmount(item.show_max)}`,
                });
            }
        }
        return base;
    }, [curTabData]);
    React.useEffect(() => {
        getInfoData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const isDisabled = React.useMemo(() => {
        if (!(infoData?.reward && infoData?.reward > 0)) return true;
        return !(curTabData?.is_unlock && !curTabData.is_suss);
    }, [curTabData, infoData]);

    const getInfoData = async () => {
        if (!activeId) return;
        try {
            const res = await getJackpotInfo({ activity_id: Number(activeId) });

            if (res.code === 200) {
                if (res.data.list) {
                    const keys = Object.keys(res.data.list);
                    const result: any = {};
                    let initKey = 0;
                    let hasInit = false;
                    if (keys.length > 0) {
                        for (let i = 0; i < keys.length; i++) {
                            const curKey = keys[i];
                            const curItem = res.data.list[curKey];
                            if (i === 0) {
                                initKey = Number(curKey);
                            }
                            if (curItem?.is_unlock && !curItem?.is_suss && !hasInit) {
                                initKey = Number(curKey);
                                hasInit = true;
                            }
                            let time = null;
                            if (res.data) {
                                time = dayjs(res.data.tally_time * 1000)
                                    .add(Number(curKey) - 1, "day")
                                    .format("YYYY-MM-DD");
                            }
                            result[curKey] = {
                                ...curItem,
                                idx: i,
                                time,
                            };
                        }
                    }
                    setInfoData({ ...res.data, list: result });
                    setActKey(Number(initKey));
                } else {
                    throw new Error(t(`activity.claimError`));
                }
            } else {
                throw new Error(t(`code.${res.code}`));
            }
        } catch (error: any) {
            if (error) {
                Toast.show({
                    content: error.message || error.toString(),
                    maskClickable: false,
                });
            }
        }
    };

    const doClaim = async () => {
        if (isDisabled) return;
        try {
            const res = await claimActivityReward({
                activity_id: Number(activeId),
                id: curTabData.id,
            });
            if (res.code === 200 && res?.data?.code === 1) {
                const amountObj: any = {};
                if (res?.data?.reward) {
                    res?.data?.reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
                    });
                    //extra_reward
                }
                if (res?.data?.extra_reward) {
                    res?.data?.extra_reward.forEach((item: any) => {
                        amountObj[`coin_${item.coin_type}`] = formatAmount(
                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
                                .plus(item.amount)
                                .toString()
                        );
                    });
                }
                setAmount(amountObj);
                setVisible(true);
                getInfoData();
            } else {
                throw new Error(t(`code.400`));
            }
        } catch (error: any) {
            if (error) {
                Toast.show({
                    content: error.message || error.toString(),
                    maskClickable: false,
                });
            }
        }
    };

    const goDeposit = () => {
        router.push("/deposit");
    };

    return (
        <div className={styles.main}>
            <div className={styles.container}>
                <div
                    className={clsx("absolute right-[0] top-[1rem] z-[3] w-[1rem]")}
                    onClick={goDeposit}
                >
                    <img src="/jackpot/recarga1.png" alt="" />
                </div>
                <div className={styles.tab}>
                    {infoData?.list &&
                        Object.keys(infoData?.list).map((key: string | number, idx: number) => {
                            const item = infoData?.list[key];
                            return (
                                <div
                                    className={clsx(styles.tabItem, {
                                        [styles.active]: actKey === Number(key),
                                    })}
                                    key={key}
                                    onClick={() => setActKey(Number(key))}
                                >
                                    <img src={images[idx]} />
                                    <span>Dia {key}</span>
                                </div>
                            );
                        })}
                </div>
                <div className={clsx(styles.intro)}>
                    <div
                        className={clsx(
                            styles.introTop,
                            "flex flex-col items-stretch justify-between p-[.12rem_.15rem] text-[.15rem]"
                        )}
                    >
                        <div className={clsx("flex flex-row justify-between")}>
                            <div className={clsx(styles.name, styles.date)}>Hora de registo:</div>
                            <div>
                                {infoData?.display_start_time
                                    ? dayjs(infoData?.tally_time * 1000).format("YYYY-MM-DD")
                                    : ""}
                            </div>
                        </div>
                        <div className={clsx("flex flex-row justify-between")}>
                            <div className={clsx(styles.name, styles.coin)}>
                                Depósito total de {actKey} Dias:
                            </div>
                            <div>R$ {formatAmount(infoData?.pay_amount || 0)}</div>
                        </div>
                    </div>
                    <div className={clsx(styles.introBottom, styles.big)}>
                        <div className="text-center">
                            0 momento em que os bonus podem serreclamados:
                        </div>
                        <div
                            className={clsx(
                                styles.date,
                                "relative mt-[.08rem] flex h-[.2rem] w-[1.8rem] flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
                            )}
                        >
                            {curTabData.time}
                        </div>
                        <div
                            className={clsx(
                                styles.coin,
                                "relative mt-[.08rem] flex h-[.2rem] w-[1.8rem] flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
                            )}
                        >
                            Bónus misterioso
                        </div>
                        <div
                            className={clsx(
                                "relative mt-[.08rem] text-[.18rem] font-bold text-[#ffd200]"
                            )}
                        >
                            <img
                                src={
                                    curTabData?.is_suss
                                        ? `/jackpot/v${curTabData.idx + 1 > 6 ? 6 : curTabData.idx + 1}.png`
                                        : `/jackpot/sv${curTabData.idx + 1 > 6 ? 6 : curTabData.idx + 1}.png`
                                }
                                alt=""
                                style={{ width: "1.5rem" }}
                                className="relative top-[-.3rem]"
                            />
                            {curTabData?.is_suss && (
                                <span
                                    className={clsx(
                                        "absolute -bottom-[-.6rem] left-[45%] translate-x-[-50%]",
                                        styles.money
                                    )}
                                >
                                    <span>+R$ </span>
                                    <span> {formatAmount(curTabData?.extra_num || 0)}</span>
                                </span>
                            )}

                            {/* R${" "}
                            {curTabData.is_suss ? formatAmount(curTabData?.extra_num || 0) : "??"} */}
                        </div>
                    </div>
                </div>
                <div className={clsx("mt-[.2rem] flex flex-row justify-center")}>
                    <div
                        className={clsx(styles.btn, {
                            [styles.disabled]: isDisabled,
                        })}
                        onClick={doClaim}
                    >
                        <span className={clsx("mt-[.1rem] text-[.2rem] font-[900]")}>RECEBER</span>
                    </div>
                </div>
                <div className={clsx("ml-[.14rem] mr-[.14rem] mt-[.2rem]")}>
                    {list.map((item, index) => {
                        return (
                            <div
                                key={index}
                                className={clsx(
                                    "flex flex-row items-center justify-between",
                                    styles.cfgItem,
                                    {
                                        [styles.odd]: index % 2 === 0,
                                        [styles.title]: index === 0,
                                    }
                                )}
                            >
                                <div className={styles.left}>{item.left}</div>
                                <div className={styles.right}>{item.right}</div>
                            </div>
                        );
                    })}
                </div>
                <div
                    className={clsx("ml-[.18rem] mr-[.18rem] mt-[.3rem] pb-[.3rem] text-[#f7ebff]")}
                >
                    <div className={clsx("mb-[.1rem] font-[700]")}>Descriçäo da Atividade</div>
                    <div className={clsx("mb-[.1rem] text-[.12rem]")}>
                        1. Novos usuários podem participar de prêmios misteriosos no segundo,
                        terceiro, sétimo, décimo quinto e trigésimo dia após o registro.
                    </div>
                    <div className={clsx("mb-[.1rem] text-[.12rem]")}>
                        2.Quanto mais depósitos, maior o tempo online, e maior o bônus para o
                        evento.
                    </div>
                </div>
            </div>
            <GlobalNotify
                amount={amount}
                visible={visible}
                onChange={() => setVisible(false)}
                deraction={5000}
            ></GlobalNotify>
        </div>
    );
};

export default Jackpot;